<template>
    <div class="app-container">
        <!-- 返回按钮 -->
        <div class="back-header">
            <el-button icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
        </div>

        <!-- 项目基本信息 -->
        <el-card class="project-info-card" shadow="never" v-loading="loading">
            <div slot="header" class="card-header">
                <h3>{{ projectInfo.title }}</h3>
                <el-tag :type="getStatusType(projectInfo.status)">
                    {{ getStatusText(projectInfo.status) }}
                </el-tag>
            </div>

            <div class="project-content">
                <div class="project-description">
                    <h4>项目描述</h4>
                    <p>{{ projectInfo.description }}</p>
                </div>

                <el-row :gutter="20" class="project-meta">
                    <el-col :span="8">
                        <div class="meta-item">
                            <span class="label">指导教师：</span>
                            <span class="value">{{ projectInfo.teacherName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="meta-item">
                            <span class="label">项目时间：</span>
                            <span class="value">
                                {{ projectInfo.startDate | parseTime('{y}-{m}-{d}') }} 至
                                {{ projectInfo.endDate | parseTime('{y}-{m}-{d}') }}
                            </span>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </el-card>

        <!-- 项目附件 -->
        <el-card class="attachments-card" shadow="never" v-if="projectAttachments.length > 0">
            <div slot="header" class="card-header">
                <h3>项目附件</h3>
                <el-tag type="info">{{ projectAttachments.length }}个文件</el-tag>
            </div>

            <div class="attachments-content">
                <div class="attachment-list">
                    <div v-for="attachment in projectAttachments" :key="attachment.uid" class="attachment-item">
                        <div class="attachment-left">
                            <div class="file-icon" :class="getFileTypeClass(attachment.fileType)">
                                <i :class="getFileIcon(attachment.fileType)"></i>
                            </div>
                            <div class="file-info">
                                <div class="file-name" :title="attachment.originalName">
                                    {{ attachment.originalName }}
                                </div>
                                <div class="file-details">
                                    <span class="file-size">{{ formatFileSize(attachment.size) }}</span>
                                    <span class="file-separator">•</span>
                                    <span class="file-time" v-if="attachment.uploadTime">
                                        {{ formatUploadTime(attachment.uploadTime) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="attachment-right">
                            <el-button type="primary" size="small" icon="el-icon-download"
                                @click="downloadAttachment(attachment)" class="download-btn">
                                下载
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 项目节点 -->
        <el-card class="milestones-card" shadow="never">
            <div slot="header" class="card-header">
                <h3>项目节点</h3>
                <div class="milestone-stats">
                    <el-tag type="info">总计 {{ milestones.length }}个</el-tag>
                    <el-tag type="success">已完成 {{ getCompletedCount() }}个</el-tag>
                </div>
            </div>

            <div class="milestones-content" v-loading="milestonesLoading">
                <div v-if="milestones.length === 0" class="empty-milestones">
                    <i class="el-icon-document" style="font-size: 48px; color: #C0C4CC;"></i>
                    <p style="color: #909399; margin: 16px 0;">暂无项目节点</p>
                </div>

                <div v-else class="milestone-timeline">
                    <div v-for="(milestone, index) in milestones" :key="milestone.id" class="milestone-item"
                        :class="getMilestoneClass(milestone)">

                        <!-- 时间轴线条 -->
                        <div class="timeline-line" v-if="index < milestones.length - 1"></div>

                        <!-- 节点图标 -->
                        <div class="milestone-icon">
                            <i :class="getMilestoneIcon(milestone)"></i>
                        </div>

                        <!-- 节点内容 -->
                        <div class="milestone-content">
                            <div class="milestone-header">
                                <h4 class="milestone-title">{{ milestone.title }}</h4>
                                <div class="milestone-meta">
                                    <el-tag :type="getMilestoneStatusType(milestone)" size="small">
                                        {{ getMilestoneStatusText(milestone) }}
                                    </el-tag>
                                    <span class="milestone-deadline">
                                        截止：{{ milestone.deadline | parseTime('{y}-{m}-{d}') }}
                                    </span>
                                </div>
                            </div>

                            <div class="milestone-description">
                                {{ milestone.description }}
                            </div>

                            <!-- 节点时间信息 -->
                            <div class="milestone-time-info" v-if="milestone.startDate || milestone.endDate">
                                <div class="time-item" v-if="milestone.startDate">
                                    <i class="el-icon-time"></i>
                                    <span class="time-label">开始时间：</span>
                                    <span class="time-value">{{ milestone.startDate | parseTime('{y}-{m}-{d}') }}</span>
                                </div>
                                <div class="time-item" v-if="milestone.endDate">
                                    <i class="el-icon-timer"></i>
                                    <span class="time-label">结束时间：</span>
                                    <span class="time-value">{{ milestone.endDate | parseTime('{y}-{m}-{d}') }}</span>
                                </div>
                                <div class="time-item" v-if="milestone.startDate && milestone.endDate">
                                    <i class="el-icon-date"></i>
                                    <span class="time-label">持续时间：</span>
                                    <span class="time-value">{{ calculateDuration(milestone.startDate,
                                        milestone.endDate) }}</span>
                                </div>
                            </div>

                            <!-- 学生附件上传区域 -->
                            <div class="milestone-attachments">
                                <div class="attachments-header">
                                    <h5>我的附件</h5>
                                    <el-button type="primary" size="mini" icon="el-icon-upload"
                                        @click="handleUploadAttachment(milestone)">
                                        上传附件
                                    </el-button>
                                </div>

                                <!-- 附件列表 -->
                                <div class="attachment-list" v-loading="milestone.documentsLoading">
                                    <div v-if="milestone.studentDocuments && milestone.studentDocuments.length > 0">
                                        <div v-for="doc in milestone.studentDocuments" :key="doc.id"
                                            class="attachment-item">
                                            <div class="attachment-info">
                                                <i class="el-icon-document"></i>
                                                <span class="attachment-name">{{ doc.fileName }}</span>
                                                <span class="attachment-size">{{ formatFileSize(doc.fileSize) }}</span>
                                                <span class="attachment-time">{{ doc.uploadTime }}</span>
                                            </div>
                                            <div class="attachment-actions">
                                                <el-button type="text" size="mini"
                                                    @click="handleDownloadAttachment(doc)">
                                                    下载
                                                </el-button>
                                                <el-button type="text" size="mini" style="color: #F56C6C;"
                                                    @click="handleDeleteAttachment(milestone, doc)">
                                                    删除
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else class="no-attachments">
                                        <span>暂无附件</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 项目成员 -->
        <el-card class="members-card" shadow="never" v-loading="membersLoading">
            <div slot="header" class="card-header">
                <h3>项目成员</h3>
                <el-tag type="info">{{ teamMembers.length }}人</el-tag>
            </div>

            <div class="members-content">
                <div v-if="teamMembers.length === 0" class="empty-members">
                    <i class="el-icon-user" style="font-size: 48px; color: #C0C4CC;"></i>
                    <p style="color: #909399; margin: 16px 0;">暂无项目成员</p>
                </div>

                <el-table v-else :data="teamMembers" style="width: 100%">
                    <el-table-column prop="username" label="用户名" width="200"></el-table-column>
                    <el-table-column prop="department" label="学院信息" width="280"></el-table-column>
                    <el-table-column prop="joinTime" label="加入时间">
                        <template slot-scope="scope">
                            {{ scope.row.joinTime | parseTime('{y}-{m}-{d}') }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 上传附件对话框 -->
        <el-dialog title="上传节点附件" :visible.sync="uploadDialogVisible" width="600px" @close="handleCloseUploadDialog">

            <div v-if="currentMilestone">
                <div class="upload-milestone-info">
                    <h4>{{ currentMilestone.title }}</h4>
                    <p>{{ currentMilestone.description }}</p>
                </div>

                <el-upload ref="upload" class="upload-demo" drag action="#" :file-list="uploadFileList"
                    :on-preview="handleFilePreview" :on-remove="handleFileRemove" :before-upload="beforeUpload"
                    :on-exceed="handleFileExceed" :http-request="handleFileUpload" multiple :limit="10"
                    accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.jpg,.jpeg,.png,.zip,.rar">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        支持上传PDF、Word、Excel、PPT、图片、压缩包等文件，单个文件不超过10MB，最多上传10个文件
                    </div>
                </el-upload>

                <!-- 文件预览列表 -->
                <div v-if="uploadFileList.length > 0" class="file-list-preview">
                    <div v-for="(file, index) in uploadFileList" :key="index" class="file-item">
                        <i :class="getFileIcon(file.fileType)" class="file-icon" />
                        <span class="file-name">{{ file.originalName || file.name }}</span>
                        <span class="file-size">({{ formatFileSize(file.size) }})</span>
                        <span v-if="file.status" class="file-status" :class="file.status">
                            {{ getFileStatusText(file.status) }}
                        </span>
                        <el-button type="text" size="mini" @click="removeFile(index)" class="remove-btn">
                            <i class="el-icon-close"></i>
                        </el-button>
                    </div>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="uploadDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirmUpload" :loading="uploading">确认上传</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getToken } from '@/utils/auth'
import { uploadFile } from '@/api/upload'
import {
    getProjectDetail,
    getProjectMilestones,
    uploadStudentMilestoneDocument,
    deleteStudentMilestoneDocument,
    saveStudentMilestoneDocument,
    getStudentDoucemntInfo,
    saveStudentMilestoneInfo,
    getMemberListData
} from '@/api/research'

export default {
    name: 'StudentProjectDetail',
    filters: {
        parseTime
    },
    data() {
        return {
            loading: false,
            milestonesLoading: false,
            membersLoading: false,
            projectId: null,
            projectInfo: {},
            projectAttachments: [],
            milestones: [],
            teamMembers: [],
            uploadDialogVisible: false,
            currentMilestone: null,
            uploading: false,
            uploadFileList: []
        }
    },
    created() {
        this.projectId = this.$route.params.id
        this.loadProjectDetail()
        this.loadProjectMilestones()
        this.loadProjectMembers()
    },
    methods: {
        // 加载项目详情
        async loadProjectDetail() {
            this.loading = true
            try {
                const response = await getProjectDetail(this.projectId)
                this.projectInfo = response.data

                // 解析项目附件
                if (this.projectInfo.attachmentUrls) {
                    try {
                        this.projectAttachments = JSON.parse(this.projectInfo.attachmentUrls)
                    } catch (parseError) {
                        console.error('解析项目附件失败:', parseError)
                        this.projectAttachments = []
                    }
                }
            } catch (error) {
                console.error('获取项目详情失败:', error)

            } finally {
                this.loading = false
            }
        },

        // 加载项目节点
        async loadProjectMilestones() {
            this.milestonesLoading = true
            try {
                const response = await getStudentDoucemntInfo(this.projectId)
                this.milestones = response.data

                // 处理节点附件数据
                for (const milestone of this.milestones) {
                    // 将 documents 转换为 studentDocuments 格式
                    milestone.studentDocuments = (milestone.documents || []).map(doc => {
                        // 解析 documentUrl JSON 字符串
                        let urlInfo = {}
                        try {
                            urlInfo = JSON.parse(doc.documentUrl)
                        } catch (e) {
                            console.error('解析文档URL失败:', e)
                        }

                        return {
                            id: doc.id,
                            fileName: doc.documentName || urlInfo.originalName || '未知文件',
                            fileSize: urlInfo.size || 0,
                            uploadTime: doc.uploadTime,
                            url: urlInfo.url || '',
                            fileType: urlInfo.fileType || ''
                        }
                    })
                    milestone.documentsLoading = false
                }
            } catch (error) {
                console.error('获取项目节点失败:', error)

            } finally {
                this.milestonesLoading = false
            }
        },

        // 加载节点附件

        // 上传附件
        handleUploadAttachment(milestone) {
            this.currentMilestone = milestone
            this.uploadFileList = []
            this.uploadDialogVisible = true
        },

        beforeUpload(file) {
            const isValidType = /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|jpg|jpeg|png|zip|rar)$/i.test(file.name)
            const isLt10M = file.size / 1024 / 1024 < 10

            if (!isValidType) {
                this.$message.error('只能上传 PDF、Word、Excel、PPT、图片、压缩包等格式的文件!')
                return false
            }
            if (!isLt10M) {
                this.$message.error('上传文件大小不能超过 10MB!')
                return false
            }

            // 添加到文件列表，显示上传中状态
            this.uploadFileList.push({
                uid: file.uid,
                name: file.name,
                originalName: file.name,
                size: file.size,
                status: 'uploading'
            })

            return true
        },

        // 自定义文件上传方法
        async handleFileUpload(options) {
            const formData = new FormData()
            formData.append('file', options.file)

            try {
                const response = await uploadFile(formData)
                if (response.code === 200 && response.data) {
                    const fileData = {
                        name: response.data.name,
                        url: response.data.url,
                        fileType: response.data.fileType,
                        size: options.file.size,
                        originalName: options.file.name,
                        status: 'success',
                        uid: options.file.uid,
                        uploadTime: Date.now(),
                        responseCode: response.code,
                        responseMsg: response.msg,
                        responseMap: response.map
                    }

                    // 更新文件列表中对应的文件
                    const fileIndex = this.uploadFileList.findIndex(item => item.uid === options.file.uid)
                    if (fileIndex !== -1) {
                        this.uploadFileList.splice(fileIndex, 1, fileData)
                    }

                    this.$message.success(`文件 ${options.file.name} 上传成功`)
                    console.log('文件上传成功:', fileData)
                } else {
                    this.$message.error('文件上传失败')
                    // 移除失败的文件
                    this.uploadFileList = this.uploadFileList.filter(item => item.uid !== options.file.uid)
                }
            } catch (error) {
                console.error('文件上传失败:', error)
                this.$message.error('文件上传失败')
                // 移除失败的文件
                this.uploadFileList = this.uploadFileList.filter(item => item.uid !== options.file.uid)
            }
        },

        handleUploadSuccess(response, file) {
            // 这个方法会在自定义上传成功后被调用
        },

        handleUploadError(error, file) {
            // 这个方法会在自定义上传失败后被调用
        },

        async handleConfirmUpload() {
            console.log('点击了确认上传按钮')
            // 过滤出上传成功的文件
            const successFiles = this.uploadFileList.filter(file => file.status === 'success')
            console.log('成功上传的文件:', successFiles)

            if (successFiles.length === 0) {
                this.$message.warning('请先上传文件')
                return
            }

            this.uploading = true
            try {
                // 构造后端需要的数据格式
                const uploadData = {
                    projectId: this.projectId,
                    milestoneId: this.currentMilestone.id,
                    urlList: successFiles.map(fileData => ({
                        name: fileData.name,
                        url: fileData.url,
                        fileType: fileData.fileType,
                        size: fileData.size,
                        originalName: fileData.originalName,
                        uploadTime: fileData.uploadTime
                    }))
                }

                console.log('发送到后端的数据:', uploadData)

                // 调用后端接口保存文件信息
                let res = await saveStudentMilestoneInfo(uploadData)
                console.log(res)
                this.uploadDialogVisible = false
                // 重新加载项目节点数据以获取最新的附件信息
                await this.loadProjectMilestones()
            } catch (error) {
                console.error('保存文件信息失败:', error)
                this.$message.error('保存失败，请重试')
            } finally {
                this.uploading = false
            }
        },

        // 文件预览
        handleFilePreview(file) {
            if (file.url) {
                window.open(file.url, '_blank')
            }
        },

        // 移除文件
        handleFileRemove(file) {
            this.uploadFileList = this.uploadFileList.filter(item => item.uid !== file.uid)
        },

        // 手动移除文件
        removeFile(index) {
            this.uploadFileList.splice(index, 1)
        },

        // 文件数量超限
        handleFileExceed(files, fileList) {
            this.$message.warning(`最多只能上传 10 个文件，当前共选择了 ${files.length + fileList.length} 个文件`)
        },

        // 获取文件状态文本
        getFileStatusText(status) {
            const statusMap = {
                'success': '上传成功',
                'uploading': '上传中...',
                'error': '上传失败'
            }
            return statusMap[status] || status
        },

        handleCloseUploadDialog() {
            this.currentMilestone = null
            this.uploadFileList = []
        },

        // 下载附件
        handleDownloadAttachment(doc) {
            // 实现文件下载逻辑
            const link = document.createElement('a')
            link.href = `/api/project/milestone/document/${doc.id}/download`
            link.download = doc.fileName
            link.click()
        },

        // 删除附件
        async handleDeleteAttachment(milestone, doc) {
            try {
                await this.$confirm('确认删除该附件吗？', '删除确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                await deleteStudentMilestoneDocument(doc.id)
                this.$message.success('附件删除成功')
                // 重新加载项目节点数据以获取最新的附件信息
                await this.loadProjectMilestones()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('删除附件失败:', error)
                    this.$message.error('删除附件失败')
                }
            }
        },

        // 加载项目成员
        async loadProjectMembers() {
            this.membersLoading = true
            try {
                const response = await getMemberListData(this.projectId)
                this.teamMembers = response.data || []
            } catch (error) {
                console.error('获取项目成员失败:', error)
                // 模拟数据
                this.teamMembers = [
                    {
                        id: 1,
                        username: '张三',
                        department: '计算机科学与技术学院',
                        joinTime: '2025-09-05'
                    },
                    {
                        id: 2,
                        username: '李四',
                        department: '软件工程学院',
                        joinTime: '2025-09-10'
                    }
                ]
            } finally {
                this.membersLoading = false
            }
        },

        // 工具方法
        getStatusType(status) {
            const types = { 0: 'info', 1: 'primary', 2: 'success', 3: 'danger' }
            return types[status] || 'info'
        },

        getStatusText(status) {
            const texts = { 0: '未开始', 1: '进行中', 2: '已完成', 3: '已终止' }
            return texts[status] || '未知'
        },

        getCompletedCount() {
            return this.milestones.filter(m => m.status === 2).length
        },

        calculateDuration(startDate, endDate) {
            if (!startDate || !endDate) return ''

            const start = new Date(startDate)
            const end = new Date(endDate)
            const diffTime = Math.abs(end - start)
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

            if (diffDays === 0) {
                return '当天'
            } else if (diffDays < 30) {
                return `${diffDays}天`
            } else if (diffDays < 365) {
                const months = Math.floor(diffDays / 30)
                const remainingDays = diffDays % 30
                return remainingDays > 0 ? `${months}个月${remainingDays}天` : `${months}个月`
            } else {
                const years = Math.floor(diffDays / 365)
                const remainingDays = diffDays % 365
                const months = Math.floor(remainingDays / 30)
                let result = `${years}年`
                if (months > 0) result += `${months}个月`
                return result
            }
        },

        getMilestoneClass(milestone) {
            return {
                'completed': milestone.status === 2,
                'in-progress': milestone.status === 1,
                'pending': milestone.status === 0
            }
        },

        getMilestoneIcon(milestone) {
            const icons = {
                2: 'el-icon-check',
                1: 'el-icon-loading',
                0: 'el-icon-time'
            }
            return icons[milestone.status] || 'el-icon-time'
        },

        getMilestoneStatusType(milestone) {
            const types = {
                2: 'success',
                1: 'primary',
                0: 'info'
            }
            return types[milestone.status] || 'info'
        },

        getMilestoneStatusText(milestone) {
            const texts = {
                2: '已完成',
                1: '进行中',
                0: '待开始'
            }
            return texts[milestone.status] || '未知'
        },

        formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes'
            const k = 1024
            const sizes = ['Bytes', 'KB', 'MB', 'GB']
            const i = Math.floor(Math.log(bytes) / Math.log(k))
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
        },

        // 项目附件相关方法
        getFileIcon(fileType) {
            const icons = {
                'pdf': 'el-icon-document',
                'doc': 'el-icon-document',
                'docx': 'el-icon-document',
                'xls': 'el-icon-document',
                'xlsx': 'el-icon-document',
                'ppt': 'el-icon-document',
                'pptx': 'el-icon-document',
                'zip': 'el-icon-document',
                'rar': 'el-icon-document',
                '7z': 'el-icon-document',
                'jpg': 'el-icon-document',
                'jpeg': 'el-icon-document',
                'png': 'el-icon-document',
                'gif': 'el-icon-document',
                'svg': 'el-icon-document',
                'mp4': 'el-icon-document',
                'avi': 'el-icon-document',
                'mov': 'el-icon-document',
                'txt': 'el-icon-document',
                'md': 'el-icon-document',
                'json': 'el-icon-document',
                'xml': 'el-icon-document'
            }
            return icons[fileType.toLowerCase()] || 'el-icon-document'
        },

        getFileTypeClass(fileType) {
            const typeClasses = {
                'pdf': 'file-pdf',
                'doc': 'file-word',
                'docx': 'file-word',
                'xls': 'file-excel',
                'xlsx': 'file-excel',
                'ppt': 'file-ppt',
                'pptx': 'file-ppt',
                'zip': 'file-archive',
                'rar': 'file-archive',
                'jpg': 'file-image',
                'jpeg': 'file-image',
                'png': 'file-image',
                'gif': 'file-image',
                'mp4': 'file-video',
                'avi': 'file-video',
                'txt': 'file-text',
                'md': 'file-text'
            }
            return typeClasses[fileType.toLowerCase()] || 'file-default'
        },

        formatUploadTime(timestamp) {
            return parseTime(new Date(timestamp), '{y}-{m}-{d} {h}:{i}')
        },

        canPreview(fileType) {
            const previewTypes = ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'txt', 'md']
            return previewTypes.includes(fileType.toLowerCase())
        },

        downloadAttachment(attachment) {
            // 创建下载链接
            const link = document.createElement('a')
            link.href = attachment.url
            link.download = attachment.originalName
            link.target = '_blank'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)

            this.$message.success(`开始下载 ${attachment.originalName}`)
        },

        previewAttachment(attachment) {
            // 在新窗口中预览文件
            window.open(attachment.url, '_blank')
        }
    }
}
</script>

<style scoped>
.back-header {
    margin-bottom: 20px;
}

.project-info-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    color: #303133;
    font-size: 20px;
    font-weight: 600;
}

.project-content {
    padding: 0;
}

.project-description h4 {
    margin: 0 0 12px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
}

.project-description p {
    color: #606266;
    line-height: 1.6;
    margin-bottom: 20px;
}

.project-meta {
    border-top: 1px solid #EBEEF5;
    padding-top: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.meta-item .label {
    color: #909399;
    width: 80px;
    flex-shrink: 0;
}

.meta-item .value {
    color: #303133;
    font-weight: 500;
}

.attachments-card {
    margin-bottom: 20px;
}

.attachments-content {
    padding: 0;
}

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: white;
    border: 1px solid #E4E7ED;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.attachment-item:hover {
    border-color: #409EFF;
    box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
    transform: translateY(-1px);
}

.attachment-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    color: #409EFF;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.file-icon:hover {
    color: #66B1FF;
    transform: scale(1.1);
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #909399;
}

.file-size {
    font-weight: 500;
}

.file-separator {
    color: #DCDFE6;
}

.file-time {
    color: #C0C4CC;
}

.attachment-right {
    flex-shrink: 0;
    margin-left: 20px;
}

.download-btn {
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
}

.milestones-card {
    margin-bottom: 20px;
}

.milestone-stats {
    display: flex;
    gap: 12px;
}

.empty-milestones {
    text-align: center;
    padding: 60px 0;
}

.milestone-timeline {
    position: relative;
}

.milestone-item {
    position: relative;
    display: flex;
    margin-bottom: 30px;
    padding-left: 60px;
}

.timeline-line {
    position: absolute;
    left: 24px;
    top: 50px;
    width: 2px;
    height: calc(100% + 30px);
    background: #EBEEF5;
}

.milestone-icon {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    background: #C0C4CC;
}

.milestone-item.completed .milestone-icon {
    background: #67C23A;
}

.milestone-item.in-progress .milestone-icon {
    background: #409EFF;
}

.milestone-item.pending .milestone-icon {
    background: #909399;
}

.milestone-content {
    flex: 1;
    background: #F8F9FA;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #EBEEF5;
}

.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.milestone-title {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
}

.milestone-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.milestone-deadline {
    color: #909399;
    font-size: 13px;
}

.milestone-description {
    color: #606266;
    line-height: 1.5;
    margin-bottom: 16px;
}

.milestone-time-info {
    background: #F5F7FA;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 3px solid #409EFF;
}

.time-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.time-item:last-child {
    margin-bottom: 0;
}

.time-item i {
    color: #409EFF;
    margin-right: 8px;
    width: 14px;
    font-size: 14px;
}

.time-label {
    color: #606266;
    font-weight: 500;
    margin-right: 4px;
    min-width: 70px;
}

.time-value {
    color: #303133;
    font-weight: 600;
}

.milestone-attachments {
    border-top: 1px solid #EBEEF5;
    padding-top: 16px;
}

.attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.attachments-header h5 {
    margin: 0;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.attachment-list {
    min-height: 40px;
}

.attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    margin-bottom: 8px;
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.attachment-name {
    color: #303133;
    font-weight: 500;
}

.attachment-size,
.attachment-time {
    color: #909399;
    font-size: 12px;
}

.attachment-actions {
    display: flex;
    gap: 8px;
}

.no-attachments {
    color: #C0C4CC;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

.upload-milestone-info {
    margin-bottom: 20px;
    padding: 16px;
    background: #F8F9FA;
    border-radius: 6px;
}

.upload-milestone-info h4 {
    margin: 0 0 8px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
}

.upload-milestone-info p {
    margin: 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
}

.file-list-preview {
    margin-top: 16px;
    border: 1px solid #EBEEF5;
    border-radius: 6px;
    background: #FAFAFA;
    padding: 12px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #F0F0F0;
}

.file-item:last-child {
    border-bottom: none;
}

.file-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #409EFF;
}

.file-name {
    flex: 1;
    color: #303133;
    font-size: 14px;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    color: #909399;
    font-size: 12px;
    margin-right: 8px;
}

.file-status {
    font-size: 12px;
    margin-right: 8px;
}

.file-status.success {
    color: #67C23A;
}

.file-status.uploading {
    color: #409EFF;
}

.file-status.error {
    color: #F56C6C;
}

.remove-btn {
    color: #F56C6C;
    padding: 0;
    margin-left: 8px;
}

/* 项目成员样式 */
.members-card {
    margin-bottom: 20px;
}

.members-content {
    padding: 0;
}

.empty-members {
    text-align: center;
    padding: 60px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .milestone-item {
        padding-left: 40px;
    }

    .milestone-icon {
        left: 8px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .timeline-line {
        left: 17px;
    }

    .milestone-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .attachment-item {
        padding: 12px 16px;
    }

    .attachment-left {
        margin-bottom: 12px;
    }

    .file-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        font-size: 18px;
    }

    .file-name {
        font-size: 14px;
    }

    .file-details {
        font-size: 12px;
    }

    .attachment-right {
        margin-left: 0;
        align-self: flex-end;
    }

    .download-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}
</style>
